<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogVisible"
    width="90%"
    :close-on-click-modal="false"
  >
    <div id="sub-bar-chart" style="height: 600px;"></div>

    <el-dialog
      width="80%"
      :title="innerTitle"
      :visible.sync="innerVisible"
      append-to-body>
      <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column 
      type="index" 
      label="序号" 
      width="60" />
      <el-table-column prop="name" label="公司名称" show-overflow-tooltip/>
       <el-table-column prop="applyCategoryName" label="类别名称" show-overflow-tooltip/>
      <el-table-column
        prop="contactPerson"
        label="联系人" width="180" />
      <el-table-column
        prop="contactPhone"
        label="联系人手机" width="180"/>
        <el-table-column prop="tag" label="供应商类型" width="180">
        <template slot-scope="scope">
            <el-tag type="success" v-if="scope.row.tag === '1'"
              >合格供应商</el-tag
            >
            <el-tag type="warning" v-if="scope.row.tag === '2'"
              >暂停供应商</el-tag
            >
            <el-tag type="danger" v-if="scope.row.tag === '3'"
              >黑名单供应商</el-tag
            >
            <el-tag type="warning" v-if="scope.row.tag === ''"
              >待审核</el-tag
            >
          </template>
        </el-table-column>
         <el-table-column
        prop="storeApplyTime"
        label="入库时间"
         width="180"
        :formatter="formatDate"/>
    </el-table>
       <div slot="footer" class="dialog-footer">
        <el-button @click="innerVisible = false">取 消</el-button>
      </div>
    </el-dialog>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
    </div>
  </el-dialog>
</template>
<script>
import echarts from "echarts";
import moment from "moment";
import { mapGetters, mapActions } from "vuex";
import * as CommonApi from "@/api/supplier_api";
export default {
  data() {
    return {
      dialogVisible: false,
      innerVisible:false,
      title: "",
      innerTitle:'',
      tableData:[]
    };
  },
   computed: {
    ...mapGetters(["findType"])
  },
  methods: {
    async open(row) {
      console.log(row.child)
      let seriesResult = []
      row.children.forEach(item => {
          let param = {}
        if (item.children.length > 0) { 
          const categoryIds = this.extractIdsFromTree(item.children)
            const str = row.child.filter(m => categoryIds.includes(m.applyCategoryId))
           param.value = str.length
           param.list = str.sort((a, b) => {
                          if (a.applyCategoryName > b.applyCategoryName) {
                            return -1;
                          }
                          if (a.applyCategoryName < b.applyCategoryName) {
                            return 1;
                          }
                          return 0;
                        });
        } else {
          const str = row.child.filter(m => m.applyCategoryId == item.id)
          param.value = str.length
           param.list = str
        }
        param.name = item.categoryName
        seriesResult.push(param)
      })
       this.title = row.name
      this.dialogVisible = true;
      this.$nextTick(() => {
       this.initChart(seriesResult);
      });
    },
      extractIdsFromTree(tree, ids = []) {
        // 遍历当前层级的节点
        tree.forEach(node => {
          // 添加当前节点的ID
          ids.push(node.id);
          
          // 如果有子节点且未超过三级，递归处理
          if (node.children && node.children.length > 0) {
            this.extractIdsFromTree(node.children, ids);
          }
        });
        return ids;
    },
    initChart(optionsData) {
      let that = this
      const chartDom = document.getElementById("sub-bar-chart");
      const myChart = echarts.init(chartDom);
      const option = {
        tooltip: {
          trigger: "axis"
        },
        grid: {
          left: "5%",
          right: "5%",
          bottom: 0,
          top: "10%",
          containLabel: true
        },
        // dataZoom: [{
        // 		show: true,
        // 		realtime: true,
        // 		start: 0,
        // 		end: 40,
        // 		bottom: 40,
        // 		height: 20,
        // 		borderRadius: 30,
        // 	},
        // 	{
        // 		type: 'inside',
        // 		realtime: true,
        // 		zoomOnMouseWheel: true, //表示不按任何功能键，鼠标滚轮能触发缩放。
        // 		start: 0,
        // 		end: 40
        // 	}
        // ],
        xAxis: {
          type: "category",
          data: optionsData.map(v => v.name),
          axisLabel: {
            color: "#333",
            rotate: 45,
            fontSize: 14 // 设置 x 轴文字大小
            //  clickable: true, // 开启 x 轴文字可点击
          }
        },
        yAxis: {
          type: "value",
          name: "单位：供应商数量"
        },
        series: [
          {
            data: optionsData,
            type: "bar",
            barWidth: 20, // 设置柱子宽度
            itemStyle: {
              color: "#409eff",
              barBorderRadius: [15, 15, 0, 0]
            },
            label: {
              show: true,
              position: "top",
              fontSize: 18,
              color: "#000"
              //  clickable: true, // 开启柱子顶部数字可点击
            }
          }
        ]
      };
      myChart.setOption(option);

       // 监听 x 轴文字点击事件
      //       myChart.getZr().on('click', params => {
      //           const target = params.target;
      //         console.log(params)
      //     if (target && target.name && option.xAxis.data.includes(target.name)) {
      //         const modalMessage = `你点击了 x 轴的 ${target.name}`;
      //       console.log(modalMessage)
      //     }
      //   });

      myChart.on("click", params => {
        that.innerTitle = that.title +'/'+ params.data.name
        that.tableData = params.data.list
        that.innerVisible = true
      });

      window.addEventListener("resize", function() {
        myChart.resize();
      });
    },
    formatDate(row, column) {
      const date = row[column.property];
      if (date == undefined) {
        return "";
      }
      return moment(date).format("YYYY-MM-DD");
    },
  }
};
</script>
<style scoped>
.chart-card-title {
  color: rgba(0, 0, 0, 0.45);
  font-size: 14px;
  line-height: 22px;
  margin: 0;
}
.total {
  text-overflow: ellipsis;
  word-break: break-all;
  color: rgb(0, 0, 0);
  margin-top: 15px;
  margin-bottom: 0px;
  font-size: 30px;
  line-height: 38px;
  height: 38px;
  overflow: hidden;
  white-space: nowrap;
}
.box-card {
  position: relative;
}
.btns {
  position: absolute;
  right: 20px;
  bottom: 20px;
}
.icon-bar {
  margin-right: 10px;
  font-size: 28px;
}
.box-card-btm + .box-card-btm {
  margin-top: 20px;
}
</style>
